import { style, globalStyle } from '@vanilla-extract/css';
import { MEDIA_DARK, vars } from '../global.css';

export const inputStyle = style({
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'flex-start',
	borderRadius: vars.layout.smallRadius,
	transition: 'border-color .2s',
	padding: '0 0.4em',
	overflow: 'hidden',
	lineHeight: vars.layout.inputHeight,
	color: vars.color.regularText,
	backgroundColor: vars.color.baseBackground,
	border: `1px solid ${vars.color.border}`,
	outline: 'none',
	boxSizing: 'border-box',
	width: '20em',
	selectors: {
		'&.focus': {
			border: `1px solid ${vars.color.brand}`,
		},
		'&.invalid': {
			borderColor: vars.color.danger,
		},
		'&[disabled]': {
			cursor: 'not-allowed',
			backgroundColor: vars.color.disableBackground,
			border: `1px solid ${vars.color.border}`,
		},
	},
});

globalStyle(`${inputStyle} input`, {
	flex: 1,
	minWidth: 0,
	width: 0,
	color: vars.color.regularText,
	fontSize: 'inherit',
	height: vars.layout.inputHeight,
	lineHeight: vars.layout.inputHeight,
	padding: '0 0.2em',
	margin: 0,
	outline: 'none',
	border: 'none',
	background: 'none',
	boxSizing: 'border-box',
});

globalStyle(`${inputStyle} label`, {
	padding: '0 0.2em',
});

globalStyle(`${inputStyle} input::-webkit-calendar-picker-indicator`, {
	'@media': {
		[MEDIA_DARK]: {
			filter: 'invert(1)',
		},
	},
});

globalStyle(`${inputStyle} input::-webkit-input-placeholder`, {
	color: vars.color.placeholderText,
});

globalStyle(`${inputStyle} input[disabled]`, {
	color: vars.color.disabledText,
	cursor: 'not-allowed',
});

globalStyle(`${inputStyle}.invalid input`, {
	color: vars.color.danger,
});

globalStyle(`${inputStyle} svg`, {
	flexShrink: '0',
	height: vars.layout.inputHeight,
	width: '2.2em',
	padding: '0 0.4em',
	fill: vars.color.placeholderText,
});

globalStyle(`${inputStyle} svg[name=clear]`, {
	display: 'none',
});

globalStyle(`${inputStyle}:hover svg[name=clear],${inputStyle}.focus svg[name=clear]`, {
	display: 'initial',
});

globalStyle(`${inputStyle}[disabled] svg`, {
	fill: vars.color.disabledText,
});

globalStyle(`${inputStyle}.mobile`, {
	border: 'none',
	borderRadius: 0,
	padding: '0em',
	borderBottom: `1px solid ${vars.color.darkBorder}`,
	backgroundColor: 'transparent',
});

globalStyle(`${inputStyle}.mobile.focus`, {
	borderBottomColor: vars.color.brand,
});
globalStyle(`${inputStyle}.mobile.invalid`, {
	borderBottomColor: vars.color.danger,
});
globalStyle(`${inputStyle}.mobile[disabled]`, {
	borderBottomColor: vars.color.border,
});

globalStyle(`${inputStyle}.select`, {
	cursor: 'pointer',
});

globalStyle(`${inputStyle}.select input`, {
	cursor: 'pointer',
});

globalStyle(`${inputStyle}.select[disabled],${inputStyle}>input[disabled]`, {
	cursor: 'not-allowed',
});
